<template>
	<view class="page" v-if="list">
		<view>
			<!-- 优惠券信息 -->
			<view class="info-top">
				<view class="name">{{list.name}}</view>
				<template v-if="list.type == 2">
					<view class="price">￥{{list.sub_price | reservedNum}}</view>
				</template>
				<template v-else>
					<view class="price">{{list.discount | reservedNum}}折</view>
				</template>
				<!-- <view v-if="isShowShare" class="share-img">
					<image src="/static/image/coupon/btn_share.png" @click="shareShow = true"></image>
					<view>
						<app-share-qr-code v-model="shareShow" title="生成优惠券海报"
							:poster-url="`/pages/poster/poster?coupon_id=` + list.id" :has-poster-nav="true">
						</app-share-qr-code>
					</view>
				</view> -->
				<view v-if="list.min_price > 0">满{{list.min_price | reservedNum}}可用</view>
				<view v-else>无门槛使用</view>
				<view v-if="list.discount_limit">优惠上限:￥{{list.discount_limit | reservedNum}}</view>
				<view v-if="list.appoint_type == 4">
					<view class="scan-code">仅限当面付活动使用</view>
				</view>
				<view v-if="list.appoint_type == 5">
					<view class="scan-code">仅限礼品卡使用</view>
				</view>
				<view @click="toGoods" v-if="list.status == 1">
					<button style="background-color: #fff;color: #ff4544;border: 1rpx solid #ff4544" :class="[`btn`]">
						立即使用
					</button>
				</view>
				<view @click="receive(list.id)" v-else-if="list.status == 0">
					<button style="color:#fff;border: 1rpx solid #ff4544;background: #ff4544;" :class="[`btn`]">立即领取
					</button>
				</view>
				<button class="btn used" v-else-if="list.status == 2">已使用</button>
				<button class="btn used" v-else-if="list.status == 3">已过期</button>
				<button class="btn used" v-else-if="list.status == 4">已领取</button>
			</view>
			<!-- 分割线 -->
			<view class="line">
				<image src="./../image/line.png"></image>
			</view>
			<!-- 优惠券使用信息 -->
			<view class="details">
				<view class="title">有效期</view>
				<view v-if="list.expire_type == '2'">{{list.begin_time}} - {{list.end_time}}
				</view>
				<view v-else>领取后{{list.expire_day}}天内有效</view>
				<view class="title">使用规则</view>
				<view v-if="list.appoint_type == '1'">本券仅限购买
					<text v-for="(cat,index) in list.cat" :key="cat.id">{{cat.name}}
						<text v-if="index !== list.cat.length -1">、</text>
					</text>
					分类下的商品。
				</view>
				<view v-if="list.appoint_type == '2'">本券仅限购买
					<text v-for="(good,index) in list.goods" :key="good.id">{{good.name}}
						<text v-if="index !== list.goods.length -1">、</text>
					</text>
					。
				</view>
				<view v-if="list.appoint_type == '3'">本券全场通用。</view>
				<view v-if="list.appoint_type == '4'">本券仅限当面付活动使用。</view>
				<view v-if="list.appoint_type == '4'">本券仅限礼品卡使用。</view>
				<view class="title">使用说明</view>
				<view>
					<text style="word-break: break-all;">{{list.rule}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import appShareQrCode
	from '../../../components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';

	export default {
		name: "app-details",
		components: {
			appShareQrCode
		},
		data() {
			return {
				list: null,
				isShowShare: false,
				shareShow: false,
				couponId: 0,
				type: 2
			};
		},
		onLoad(option) {
			this.couponId = option.id || 0;
			this.type = option.type || 2;
			// this.shareShow = option.shareShow || false;
			this.getList(this.couponId);
		},
		computed: {
			...mapState({
				theme: state => state.mallConfig.theme,
			})
		},
		methods: {
			getList(id) {
				let that = this;
				that.$showLoading({
					type: 'global',
					text: '加载中...'
				});
				let url = that.$apiSol.coupon.detail;
				let para = {
					coupon_id: id
				};
				if (that.type === 2) {
					url = that.$apiSol.coupon.user_coupon_detail;
					para = {
						user_coupon_id: id
					};
				}
				that.$request({
					url: url,
					data: para
				}).then(response => {
					that.$hideLoading();
					if (response.code === 0) {
						that.list = response.data.list;
						console.log(that.list);
						// if (that.list.status == 0) {
						// 	that.isShowShare = true
						// } else {
						// 	that.isShowShare = false
						// }
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					that.$hideLoading();
				});
			},
			toGoods() {
				uni.navigateTo({
					url: '/plugins/mch_solitaire/user-center/user-center'
				});
			},
			receive(id) {
				let that = this;
				if (this.type === 2) {
					return false;
				}
				if (that.loading) {
					return false
				}
				that.loading = true;
				uni.showLoading({
					title: '领取中...'
				});
				that.$request({
					url: that.type === 1 ? that.$apiSol.member.receive : th$apiSol.piSol.coupon.receive,
					data: {
						coupon_id: id
					},
				}).then(response => {
					that.loading = false;
					uni.hideLoading();
					if (response.code === 0) {
						uni.showToast({
							title: response.msg,
							duration: 1000,
							mask: true,
						});
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000,
							mask: true,
						});
					}
					this.getList(id);
				}).catch(() => {
					uni.hideLoading();
					that.$event.on(that.$const.EVENT_USER_LOGIN).then(() => {
						that.receive(id);
					});
				});
			},
		},
		filters: {
			reservedNum(data) {
				return Number(data);
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		height: 100%;
		background-color: #d6b985;
		width: 100%;
		padding: #{20rpx} 0;
		position: absolute;
	}

	.info-top {
		background-color: #fff;
		margin: 0 #{25rpx};
		text-align: center;
		padding-top: #{60rpx};
		border-top-left-radius: #{25rpx};
		border-top-right-radius: #{25rpx};
		color: #353535;
		font-size: #{32rpx};
		position: relative;
	}

	.name {
		font-size: #{28rpx};
		color: #666;
	}

	.price {
		font-size: #{56rpx};
		margin-top: #{28rpx};
		margin-bottom: #{10rpx};
	}

	.scan-code {
		height: #{56rpx};
		line-height: #{52rpx};
		margin: #{35rpx} auto 0;
		color: #ff4544;
		font-size: #{30rpx};
		border: none;
	}

	.btn {
		height: #{56rpx};
		line-height: #{52rpx};
		width: #{240rpx};
		margin: #{35rpx} auto 0;
		font-size: #{30rpx};
		border-radius: #{28rpx};
		border: #{2rpx} solid;
	}

	.btn.used {
		background-color: #f7f7f7;
		color: #acacac;
		border: #{2rpx} solid #f7f7f7;
	}

	.btn::after {
		border: 0;
	}

	.line {
		height: #{50rpx};
		margin: #{-1rpx} #{25rpx};
		background-color: #fff;
	}

	.line image {
		height: 100%;
		width: 100%;
	}

	.details {
		background-color: #fff;
		margin: #{-2rpx} #{25rpx} 0;
		font-size: #{28rpx};
		padding: #{25rpx} #{40rpx} #{65rpx};
		border-bottom-left-radius: #{25rpx};
		border-bottom-right-radius: #{25rpx};
	}

	.details .title {
		color: #b0b0b0;
		font-size: #{26rpx};
		margin-bottom: #{25rpx};
		margin-top: #{50rpx};
	}

	.scan-code {
		height: #{56rpx};
		line-height: #{52rpx};
		margin: #{35rpx} auto 0;
		color: #ff4544;
		font-size: #{30rpx};
		border: none;
	}

	.info-top .share-img {
		position: absolute;
		right: #{32rpx};
		top: #{32rpx};
		z-index: 5;
		width: #{94rpx};
		height: #{94rpx};

		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}
</style>
